<template>
  <div id="parent">
    <common-head :child-name="childName" father-name="系统管理"></common-head>
    <div class="body">
        <div class="base">
          <userHead :partName='baseInfo'></userHead>
          <div class="userImg">
            <el-avatar shape="circle" :size="100" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
            <h5>jing</h5>
            <el-tag>普通会员</el-tag>
          </div>
          <div class="userInfo">
            <table class="userTable">
              <tr><td>用户ID:</td><td>0001</td><td>地区:</td><td>四川成都</td></tr>
              <tr><td>用户昵称:</td><td>khan</td><td>行业:</td><td></td></tr>
              <tr><td>性别:</td><td>boy</td><td>体重:</td><td></td></tr>
              <tr><td>出生年月:</td><td></td><td>注册时间:</td><td></td></tr>
              <tr><td>手机号:</td><td></td><td>用户来源:</td><td></td></tr>
            </table>
          </div>
          <div style="clear: both"></div>
        </div>
        <div class="consume" style="padding-bottom: 10px;box-sizing: border-box">
          <userHead :partName='consumeInfo'></userHead>
          <el-table
            :data="userConsume"
            border
            :header-cell-style="{background:'#f3f4f7',color:'black',height:'40px'}"
            style="width: 95%;margin: auto;">
            <el-table-column
              prop="date"
              align="center"
              label="挂号订单"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="体检订单"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="问诊订单">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="商场订单">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="关注用户数">
            </el-table-column>
          </el-table>
        </div>
        <div class="register">
          <userHead :partName='registerInfo'></userHead>
          <el-table
            :data="userConsume"
            border
            :header-cell-style="{background:'#F3F4F7',color:'black',height:'40px'}"
            style="width: 95%;margin: auto;">
            <el-table-column
              prop="date"
              align="center"
              label="订单编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="挂号费用"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="医院">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="科室">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="下单时间">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="订单状态">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="操作">
            </el-table-column>
          </el-table>
        </div>
        <div class="examination">
          <userHead :partName='bodyTest'></userHead>
          <el-table
            :data="userConsume"
            border
            :header-cell-style="{background:'#F3F4F7',color:'black',height:'40px'}"
            style="width: 95%;margin: auto;">
            <el-table-column
              prop="date"
              align="center"
              label="订单编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="体检金额"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="体检机构">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="体检套餐">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="下单时间">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="订单状态">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="操作">
            </el-table-column>
          </el-table>
        </div>
        <div class="medicalAdvice">
          <userHead :partName='medicalAdv'></userHead>
          <el-table
            :data="userConsume"
            border
            :header-cell-style="{background:'#F3F4F7',color:'black',height:'40px'}"
            style="width: 95%;margin: auto;">
            <el-table-column
              prop="date"
              align="center"
              label="订单编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="订单金额"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="问题描述">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="问诊机构">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="问诊时间">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="订单状态">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="操作">
            </el-table-column>
          </el-table>
        </div>
    </div>
  </div>
</template>

<script>
import userHead from "./userHead";
import commonHead from "../common/commonHead";
export default {
  name: "userDetail",
  components: {commonHead,userHead},
  data(){
    return {
      childName : this.$route.query.childName,
      baseInfo:'基础信息',
      consumeInfo: '统计信息',
      registerInfo: '挂号记录',
      medicalAdv:'问诊记录',
      bodyTest:'体检记录',
      userConsume:[{}]
    }
  }
}
</script>

<style scoped>
/*div{*/
/*  border: 1px solid white;*/
/*}*/
#parent{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.body{
  background-color: #F0F2F5;
  padding-top: 15px;
  box-sizing: border-box;
}
.base,.consume,.register,.examination,.medicalAdvice{
  width: 92%;
  margin: auto;
  background-color: white;
}
.userImg{
  width: 100px;
  height: 210px;
  float: left;
  margin-left: 30px;
  margin-top: 30px;
  text-align: center;
}
.userInfo{
  height: 210px;
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}
.userTable td{
  width: 150px;
  text-align: right;
}
.userTable tr{
  margin-left: 5px;
  height: 40px;
  text-align: left;
}
</style>

